
<template>
    <div :class="city==1?'dragDemo':'dragDemo m'">
    <ul class="tabNav">
      <li :class="tabNav==1?'cut':''" @click="tabNav(1)" style="margin-left: 40%;">表单设计</li>
      <li :class="tabNav==2?'cut':''" @click="tabNav(2)">流程设计</li>
    </ul>
        <!--列表1-->
        <draggable class="listLeft"
                   element="div"
                   v-model="listLeft"
                   :options="dragOptions1"
                   :move="onMove"
                   @start="isDragging=true"
                   @end="isDragging=false">
            <div class="li" v-for="(item,key) in listLeft" :key="key">
                {{item.name}}
                <i v-if="item.value=='inputText'" class="layui-icon">&#xe679;</i> 
                <i v-else-if="item.value=='textarea'" class="layui-icon">&#xe66b;</i> 
                <i v-else-if="item.value=='select'" class="layui-icon">&#xe625;</i> 
                <i v-else-if="item.value=='checkbox'" class="layui-icon">&#xe64e;</i> 
                <i v-else-if="item.value=='radio'" class="layui-icon">&#xe643;</i> 
                <i v-else-if="item.value=='switch'" class="layui-icon">&#xe642;</i> 
                <i v-else-if="item.value=='formDataTime'" class="layui-icon">&#xe637;</i> 
                <i v-else-if="item.value=='personnel'" class="layui-icon">&#xe770;</i> 
                <i v-else-if="item.value=='upImg'" class="layui-icon">&#xe64a;</i> 
                <i v-else-if="item.value=='upFolder'" class="layui-icon">&#xe64c;</i> 
                <i v-else class="layui-icon">&#x1007;</i> 
            </div>
        </draggable>
        <!--PC后台列表-->
        <draggable class="list-group layui-form"
                   element="div"
                   v-model="listRight"
                   :options="dragOptions2"
                   :move="onMove"
                   @start="rightStart"
                   @add="addList"
                   @end="rightEnd"
                   v-show="city==1"
        >
                <div :class="listCurShu==key?'li cur':'li'" v-for="(item,key) in listRight" :key="key" @click="listCur(key)">
                <!-- 单行输入框 -->
                    <div class="layui-form-item" :class="item.value+'Pc'" v-if="item.value=='inputText'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" :placeholder="item.placeholder" class="layui-input">
                        </div>
                    </div>
                <!-- 多行输入框 -->
                    <div class="layui-form-item layui-form-text" v-else-if="item.value=='textarea'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                        <textarea :placeholder="item.placeholder" class="layui-textarea"></textarea>
                        </div>
                    </div>
                <!-- 下拉列表 -->
                    <div class="layui-form-item" v-else-if="item.value=='select'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                             <input type="text" name="title" lay-verify="title" autocomplete="off" :placeholder="item.placeholder" class="layui-input">
                             <i class="layui-icon" style="position: absolute;right: 8px;top: 9px;color: #999;">&#xe625;</i>
                        </div>
                    </div>
                <!-- 多选框 -->
                    <div class="layui-form-item" v-else-if="item.value=='checkbox'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                          <span class="checkbox">选择一</span>
                          <span class="checkbox">选择二</span>
                        </div>
                    </div>
                <!-- 单选框 -->
                    <div class="layui-form-item" v-else-if="item.value=='radio'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                           <span class="radio">选择一</span>
                           <span class="radio">选择二</span>
                        </div>
                    </div>
                 <!-- 开关按钮 -->
                    <div class="layui-form-item" v-else-if="item.value=='switch'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                          <img src="../../images/switch.jpg"/>
                        </div>
                    </div>
                 <!-- 日期 -->
                    <div class="layui-form-item" v-else-if="item.value=='formDataTime'">
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" :placeholder="item.placeholder" class="layui-input">
                        </div>
                    </div>
                 <!-- 人员选择 -->
                    <div class="layui-form-item" v-else-if="item.value=='personnel'">
                       
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-inline">
                         <input type="text" name="title" lay-verify="title" autocomplete="off"  class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">{{item.placeholder}}</div>
                    </div>
                <!-- 图片上传 -->
                    <div class="layui-form-item" v-else-if="item.value=='upImg'">
                       
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-inline" style="width: 115px;">
                          <button type="button" class="layui-btn upBut"><i class="layui-icon">&#xe654;</i>上传图片</button> 
                        </div>
                        <div class="layui-form-mid layui-word-aux">{{item.placeholder}}</div>
                        <p style="clear:both"></p>
                        <div class="imgZw">
							<span id="moren">图片预览</span>
						</div>
                    </div>
                 <!-- 图片上传 -->
                    <div class="layui-form-item" v-else-if="item.value=='upFolder'">
                       
                        <label class="layui-form-label">{{item.name}}</label>
                        <div class="layui-input-inline" style="width: 115px;">
                          <button type="button" class="layui-btn upBut"><i class="layui-icon">&#xe654;</i>上传附件</button> 
                        </div>
                        <div class="layui-form-mid layui-word-aux">{{item.placeholder}}</div>
                      
                    </div>
                    <div v-else class="layui-form-item" >
                        {{item.name}}
                    </div>
                    <i class="layui-icon delIcon" @click="delLi(key)">&#x1007;</i> 
                </div>
        </draggable>
         <!--移动端列表-->
         <div class="Mbj" v-show="city==2">
            <draggable class="list-group0"
                    element="div"
                    v-model="listRight"
                    :options="dragOptions2"
                    :move="onMove"
                    @start="rightStart"
                    @add="addList"
                    @end="rightEnd"
            >
            <div :class="listCurShu==key?'li cur':'li'" v-for="(item,key) in listRight" :key="key" @click="listCur(key)">
                    <!-- 单行输入框 -->
                    <div class="inputText" :class="item.value+'Pc'" v-if="item.value=='inputText'">
                        <span class="t">{{item.name}}</span>
                        <span class="placeholder">{{item.placeholder}}</span>
                    </div>
                    <!-- 多行输入框 -->
                        <div class="textarea" v-else-if="item.value=='textarea'">
                            <span class="t">{{item.name}}</span>
                            <p class="placeholder">{{item.placeholder}}</p>
                        </div>
                    <!-- 下拉列表 -->
                        <div class="inputText" v-else-if="item.value=='select'">
                            <span class="t">{{item.name}}</span>
                            <span class="placeholder">
                            {{item.placeholder}}
                            <i class="layui-icon">&#xe625;</i>
                            </span>
                        </div>
                    <!-- 多选框 -->
                        <div class="inputText" v-else-if="item.value=='checkbox'">
                          <span class="t">{{item.name}}</span>
                            <span class="placeholder">
                            {{item.placeholder}}
                            <i class="layui-icon">&#xe625;</i>
                            </span>
                        </div>
                    <!-- 单选框 -->
                        <div class="inputText" v-else-if="item.value=='radio'">
                            <span class="t">{{item.name}}</span>
                            <span class="placeholder">
                            {{item.placeholder}}
                            <i class="layui-icon">&#xe625;</i>
                            </span>
                        </div>
                    <!-- 开关按钮 -->
                        <div class="inputText" v-else-if="item.value=='switch'">
                            <span class="t">{{item.name}}</span>
                            <span class="placeholder"><img src="../../images/switch.jpg"/></i>
                        </span>
                        
                        </div>
                    <!-- 日期 -->
                        <div  class="inputText" v-else-if="item.value=='formDataTime'">
                           <span class="t">{{item.name}}</span>
                            <span class="placeholder">
                            {{item.placeholder}}
                            <i class="layui-icon">&#xe625;</i>
                            </span>
                        </div>
                    <!-- 人员选择 -->
                        <div class="inputText" v-else-if="item.value=='personnel'">
                            <span class="t">{{item.name}}</span>
                            <span class="placeholder">
                            {{item.placeholder}}
                            <i class="layui-icon">&#xe625;</i>
                            </span>
                        </div>
                    <!-- 图片上传 -->
                        <div class="inputText" v-else-if="item.value=='upImg'" style="margin-bottom: 10px;">
                            <span class="t">
                            {{item.name}}
                             <span style=" font-size: 12px;color: #999;"> （{{item.placeholder}}）</span>
                            </span>
                            <span class="placeholder">
                                <i class="layui-icon Upimg">&#xe60d;</i>
                            </span>
                        </div>
                    <!-- 附件上传 -->
                        <div class="inputText" v-else-if="item.value=='upFolder'" style="margin-bottom: 10px;">
                            <span class="t">
                            {{item.name}}
                             <span style=" font-size: 12px;color: #999;"> （{{item.placeholder}}）</span>
                            </span>
                            <span class="placeholder">
                                <i class="layui-icon Upimg">&#xe608;</i>
                            </span>
                        </div>
                        
                        <div v-else class="layui-form-item" >
                            {{item.name}}
                        </div>
                        <i class="layui-icon delIcon" @click="delLi(key)">&#x1007;</i> 
                    </div>
            </draggable>
        </div>
        <div class="footer">
           切换表单模式：
           <select name="city" lay-verify="" v-model="city">
                <option value="1">PC后台</option>
                <option value="2">移动端</option>
            </select>    
        </div>
        <div class="configure layui-form">
            <div v-model="listRight" v-for="(item,key) in listRight"
            :key="key" v-show="listCurShu==key">
               
                 <!-- 单行输入框 -->
                <div class="inputText" :class="item.value+'m'" v-if="item.value=='inputText'">
                        <div id="commonField">
                            <div class="layui-form-item">
                                <label class="layui-form-label">字段名称</label>
                                <div class="layui-input-block">
                                    <input id="FIELD_NAME" name="FIELD_NAME" placeholder="" class="layui-input" type="text" v-model="item.name" >
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">提示语</label>
                                <div class="layui-input-block">
                                <input id="FIELD_DESC" name="FIELD_DESC" placeholder="" class="layui-input" type="text"  v-model="item.placeholder">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">必填</label>
                                <div class="layui-input-block">
                                    <input id="FIELD_REQUIRE" name="FIELD_REQUIRE" lay-filter="filter" value="1" lay-skin="switch" lay-text="是|否" type="checkbox">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">另存对象（自行处理）</label>
                                <div class="layui-input-block">
                                <input id="OBJECT_NAME" name="OBJECT_NAME" placeholder="" class="layui-input" type="text" v-model="item.OBJECT_NAME">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">另存对象字段（自行处理）</label>
                                <div class="layui-input-block">
                                <input id="OBJECT_FIELD" name="OBJECT_FIELD" placeholder="" class="layui-input" type="text" v-model="item.OBJECT_FIELD">
                                </div>
                            </div>
                        </div>
                </div>
                <!-- 单行输入框 -->
                <div class="inputText" :class="item.value+'m'" v-else>
                      <p style="text-align: center; margin-top: 23px;color: #666;">
                        未配置{{item.name}}
                      </p>
                </div>
            </div>
         <!--{{listRight}}-->
        </div>
    </div>
</template>

<script>
    import draggable from "vuedraggable";
    var form;
    layui.use('form', function(){
       form = layui.form;          
    });
    var dataList=[{
                    name:'单行输入框',
                    value:'inputText',
                    placeholder:'请输入内容',
                    switch:false,
                    OBJECT_NAME:'',
                    OBJECT_FIELD:''

                },{
                    name:'多行输入框',
                    value:'textarea',
                    placeholder:'请输入内容'
                },{
                    name:'下拉列表',
                    value:'select',
                    placeholder:'点击选择'
                },{
                    name:'多选框',
                    value:'checkbox',
                    placeholder:'点击选择'
                },{
                    name:'单选框',
                    value:'radio',
                    placeholder:'点击选择'
                },{
                    name:'开关按钮',
                    value:'switch',
                    placeholder:'点击选择'
                },{
                    name:'日期',
                    value:'formDataTime',
                    placeholder:'点击选择时间'
                },{
                    name:'人员选择',
                    value:'personnel',
                    placeholder:'点击选择人员'
                },{
                    name:'上传图片',
                    value:'upImg',
                    placeholder:'大小不能超过8M'
                },{
                    name:'上传附件',
                    value:'upFolder',
                    placeholder:'大小不能超过8M'
                }]
    export default{
        name:'dragDemo',
        components:{
            draggable
        },
        data(){
            return{
                tabNav:1,
                city:1,//切换表单模式 1PC 2APP
                isDragging:false,
                indexList:0,
                listCurShu:0,
                listLeft:[],
                listRight:[],
                oldleftlist:[]
            }
        },
        computed: {
            
            dragOptions1() {
                
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull:'clone'
                    },
                    ghostClass: "ghost",
                };
                
            },
            dragOptions2(){
                return {
                    animation: 0,
                    group: "description",
                };
            }
            
        },
        mounted() {
            this.listLeft=JSON.parse(JSON.stringify(dataList))
            this.listRight=JSON.parse(JSON.stringify(dataList))
        },
        methods:{
            addList(){
                 form.render();
                 this.listLeft=JSON.parse(JSON.stringify(this.listLeft));
                 this.listRight=JSON.parse(JSON.stringify(this.listRight));
            },
            listCur(i){
                this.listCurShu=i
            },
            onMove({relatedContext, draggedContext}) {
                this.indexList=relatedContext.index
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;

                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                );
               
 
            },
            rightStart(){
               
                this.oldleftlist=JSON.parse(JSON.stringify(this.listLeft.concat()));
                this.isDragging=true;
            },
            rightEnd(){
                form.render();
                this.listCurShu=this.indexList
                this.isDragging=false;
                //左边数据不变
                this.listLeft=JSON.parse(JSON.stringify(this.oldleftlist.concat()));
                
            },
            //删除队列
            delLi(index){
                 this.listRight.splice(index, 1);
            } ,
            tabNav(val){
                this.tabNav=val
            }
        }
    }
</script>
<style scoped>
    @import "draggable.css";
</style>
